<template>
  <div class="webnet">
    <el-tabs v-model="activeName" class="tabHead" type="card"  @tab-click="handleClick">
      <el-tab-pane label="VUE" name="vue">
          <vv :vdata='type'></vv>
      </el-tab-pane>
      <el-tab-pane label="小程序" name="smpro">
        <vv :vdata='type'></vv>
      </el-tab-pane>
      <el-tab-pane label="学习课堂" name="study">
        <vv :vdata='type'></vv>
      </el-tab-pane>
      <el-tab-pane label="资料网盘" name="pan">
        <vv :vdata='type'></vv>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang='ts'>
import { defineComponent, getCurrentInstance, reactive, toRefs } from "vue";
import vv from './web/vv.vue'
export default defineComponent({
    components:{
        vv
    },
  setup() {
     //@ts-ignore
     let {ctx}=getCurrentInstance()

    
    let state = reactive({
      activeName: "vue",
      type:'v'
    });
    let handleClick=(key:any,keypath:string)=>{
      
      switch(key.props.name){
        case 'vue':state.type='v'; break;
        case 'smpro':state.type='s'; break;
        case 'study':state.type='x'; break;
        case 'pan':state.type='z'; break;
        default: state.type=''; break;
      }
      console.log(key.props.name,state.type,'00000000000')
    }
    return {
      ...toRefs(state),handleClick
    };
  },
});
</script>

<style lang='less' scoped>
.webnet {
  width: 100%;
  display: flex;
  padding: 10px 20px;
}
.tabHead{
    width: 100%;
}

/deep/ .el-tabs__item{
    width:120px;
    font-size: 17px;
    font-weight: 400;
    text-align: center;
}

</style>